<template>
	<view class="workdetailContent">
		<!-- 1 -->
		<view class="cardItem1">
			<view class="item1_top">
				{{topData.name}}
			</view>
			<view class="item1_cont">
				<view class="item1_left">
					<view class="text">截止时间：{{topData.deadlinetime}}</view>
					<view class="text">完成人数：{{topData.do_num}}人</view>
					<view class="text">班级得分率：{{ topData.scoring_rate }}</view>
					<view class="text">未完成数：{{topData.not_num}}人</view>
				</view>
				<view class="item1_right">
					<view class="btns" @click="getRevocation(1)">撤回作业</view>
					<view class="btns" @click="getGrades()">成绩汇总</view>
					<view class="btns" @click="getRevocation(2)">催交提醒</view>
				</view>
			</view>
		</view>
		<!--  -->
		<view class="course-grade">
			<view class="grade-text" :class="{'active-tab': index == currentIndex}" v-for="(item, index) in tabText"
				:key="index" @tap="handleSwitchTab(index)">

				<view class="text"> {{item}} </view>
				<!-- <image v-if="index==1" class="picIcons" referrerpolicy="no-referrer" src="/static/workImg/icon@3.png"> -->
<!--				</image>-->
			</view>
		</view>


		<!-- 作业报告 v-if="currentIndex==0"-->
		<view class="tabItem" v-show="isShow1">
			<view class="card_Item">
				<view class="head_title">
					<image referrerpolicy="no-referrer" src="/static/workImg/icon@2.png"></image>
					<view class="headH1">未完成作业</view>
				</view>
				<view class="nocompleteItem">
					<view class="title"><text>{{ weiWachengTotal }}</text> 个学生作业没有完成，请家长督促</view>
					<view class="list">
						<view class="name" v-for="(item,index) in weiWachengData" :key="index">{{ item }}</view>
					</view>
				</view>
			</view>
			<view class="card_Item">
				<view class="head_title">
					<image referrerpolicy="no-referrer" src="/static/workImg/icon@2.png"></image>
					<view class="headH1">表现优秀</view>
				</view>
				<view class="outstandingItem">
					<view class="item_row">
						<image referrerpolicy="no-referrer" src="/static/workImg/title@1.png" class="titleImg"></image>
						<view class="text">本次作业成绩最好</view>
						<view class="itemView" v-if="learning_star.length>0">
							<view class="imgItem" v-if="learning_star[0]">
								<view style="position: relative">
									<image referrerpolicy="no-referrer" src="/static/workImg/bg@1.png" class="bgIcon">
									</image>
									<image class="avatar" referrerpolicy="no-referrer" :src="learning_star[0].avatar"> </image>
								</view>
								<view class="name">{{ learning_star[0].nickname }}</view>
							</view>
							<view class="imgItem" v-if="learning_star[1]">
								<view style="position: relative">
									<image referrerpolicy="no-referrer" src="/static/workImg/bg@2.png"></image>
									<image class="avatar" referrerpolicy="no-referrer" :src="learning_star[0].avatar"> </image>
								</view>
								<view class="name">{{ learning_star[1].nickname }}</view>
							</view>
							<view class="imgItem" v-if="learning_star[2]">
								<view style="position: relative">
									<image referrerpolicy="no-referrer" src="/static/workImg/bg@3.png"></image>
									<image class="avatar" referrerpolicy="no-referrer" :src="learning_star[0].avatar"> </image>
								</view>
								<view class="name">{{ learning_star[2].nickname }}</view>
							</view>
						</view>
					</view>
					<view class="item_row">
						<image referrerpolicy="no-referrer" src="/static/workImg/title@2.png" class="titleImg"></image>
						<view class="text">最早完成作业且作业得分率60%</view>
						<view class="itemView" v-if="positive_star.length>0">
							<view class="imgItem" v-if="positive_star[0]">
								<view style="position: relative">
									<image referrerpolicy="no-referrer" src="/static/workImg/bg@1.png" class="bgIcon">
									</image>
									<image class="avatar" referrerpolicy="no-referrer" :src="positive_star[0].avatar"> </image>
								</view>
								<view class="name">{{ positive_star[0].nickname }}</view>
							</view>
							<view class="imgItem" v-if="positive_star[1]">
								<view style="position: relative">
									<image referrerpolicy="no-referrer" src="/static/workImg/bg@2.png"></image>
									<image class="avatar" referrerpolicy="no-referrer" :src="positive_star[1].avatar"> </image>
								</view>
								<view class="name">{{ positive_star[1].nickname }}</view>
							</view>
							<view class="imgItem" v-if="positive_star[2]">
								<view style="position: relative">
									<image referrerpolicy="no-referrer" src="/static/workImg/bg@3.png"></image>
									<image class="avatar" referrerpolicy="no-referrer" :src="positive_star[2].avatar"> </image>
								</view>
								<view class="name">{{ positive_star[2].nickname }}</view>
							</view>
						</view>
					</view>

				</view>

			</view>
			<view class="card_Item">
				<view class="head_title">
					<image referrerpolicy="no-referrer" src="/static/workImg/icon@2.png"></image>
					<view class="headH1">成绩汇总</view>
				</view>
				<view class="scoreItem">
					<view class="title">{{ formatDate(chengji_info.createtime) }}{{ chengji_info.tname }}-{{ chengji_info.cname }}</view>
					<view class="text">作业：{{ chengji_info.name }}</view>
				</view>
				<view class="tabCard">
					<view class="title">
						<view class="text">学生姓名</view>
						<view class="text">总分</view>
						<view class="text">作业</view>
					</view>
					<view class="lists">
						<view class="li" v-for="(item, index) in chengji_user_list" :key="index">
							<view class="num">
								<text>{{ item.name }}</text>
								<image referrerpolicy="no-referrer" src="/static/workImg/icon@4.png">
								</image>
							</view>
							<view class="name name1">{{ item.full_score }}分</view>
							<view class="name name2">{{ item.score }}分</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 学生成绩 v-else-if="currentIndex==1"-->
		<view class="tabItem" v-show="isShow2">
			<view class="card_Item">
				<view class="head_title">
					<image referrerpolicy="no-referrer" src="/static/workImg/icon@2.png"></image>
					<view class="headH1">得分率分布 </view>
				</view>
				<BarChart :tid="tabId"></BarChart>
			</view>
			<view class="card_Item">
				<view class="tabCard">
					<view class="title">
						<view class="text">姓名</view>
						<view class="text">完成度</view>
						<view class="text">总得分</view>
					</view>
					<view class="lists">
						<view class="li" v-for="(item, index) in studentData" :key="index">
							<view class="num">
								<text>{{ item.name }}</text>
								<image referrerpolicy="no-referrer" src="/static/workImg/icon@4.png">
								</image>
							</view>
							<view class="name name1">{{ item.schedule }}</view>
							<view class="name name2">{{ item.score }}分</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 题目统计 v-else-->
		<view class="tabItem" v-show="isShow3">
			<view class="tabCard tabCard3">
				<view class="title">
					<view class="text">共{{totalData.length}}个作业内容</view>
					<view class="text">平均分/总分</view>
				</view>
				<view class="lists">
					<view class="li" v-for="(item, index) in totalData" :key="index" @tap="goTab3Detail(item.tid)">
						<view class="name">{{item.tname}}</view>
						<view class="num">
							<text>{{ item.score.toFixed(2) }}/{{ item.full_score }}</text>
							<image referrerpolicy="no-referrer" src="/static/arrow_icon.png">
							</image>
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- </view> -->
		<!-- 普通弹窗 -->
		<!-- <uni-popup ref="popup" :mask-click="false"> -->
		<uni-popup ref="popup">
			<view class="popupRow">
				<image src="/static/workImg/reBg.png" referrerpolicy="no-referrer"></image>
				<view class="popup-items">
					<view class="title">{{btnID==1? '撤回作业':'发送提醒?'}}</view>
					<view class="text">{{btnID==1? '确定要撤回作业吗？':'确定给未交作业的学生发送提醒消息？'}}</view>
					<view class="popup-btn">
						<view class="btn" @click="close">取 消</view>
						<view class="btn btnOK" @click="getSumbut(btnID)">确 认</view>
					</view>
				</view>
			</view>
		</uni-popup>
			<uni-popup ref="popup2">
				<view class="popupCopyRow">
					<image src="/static/workImg/noBg@1.png" referrerpolicy="no-referrer" class="bgIcon"></image>
					<view class="copyView">
						<view class="copyItem">
							<view class="text">作业名称：{{chengji_info.name}} </view>
							<view class="text">截止时间：{{  formatDate(chengji_info.createtime) }}</view>
							<view class="text">未完成的学生：{{ weiWachengTotal }}人</view>
							<view class="text">未完成名单：{{weiWachengData.join(",")}}</view>
						</view>
						<view class="popup-btn">
							<view class="btn btnOK" @click="deClose">点击一键复制</view>
						</view>
					</view>
					<image src="/static/workImg/guanbi-3.png" referrerpolicy="no-referrer" class="dexIcon" @click="deClose"></image>
				</view>
			</uni-popup>
	</view>
</template>

<script>
	import LineChart from '@/pages/homeworkDetail/lineChart.vue';
	import BarChart from '@/pages/homeworkDetail/barChart.vue';
	export default {
		components: {
			LineChart,
			BarChart
		},
		data() {
			return {
				tabId: 0,
				btnID: 0, //1撤回   2重做
				topData: {},
				currentIndex: 1,
				// tabText: ['作业报告', '学生成绩'],
				tabText: ['作业报告', '学生成绩', '题目统计'],
				markData: {}, //分数统计 
				lineBox: false,
				analyzeType1: {},
				analyzeType2: [],
				analyzeType3: [],
				analyzeType4: [],
				analyzeType5: [],
				studentData: [], //学生成绩
				totalData: [], //题目统计
				isShow1: false,
				isShow2: true,
				isShow3: false,
				tabarName:"",
				weiWachengData:[],
				weiWachengTotal:'',
				learning_star:[],
				positive_star:[],
				chengji_info:{},
				chengji_user_list:[]
			};
		},
		onLoad(option) {
			// console.log('tid', option)
			this.tabId = Number(option.tid)
			this.tabarName = option.tname;
			uni.setNavigationBarTitle({
				title: option.tname,
			});
		},
		mounted() {
			this.getTop()
			// this.getMarks()
			this.getStudent()
			this.getTopic()
			// this.getquestionData()
			this.getChengji();
			// this.getKeHouList88()
		},
		methods: {
			formatDate(dateString) {
				// 创建一个Date对象
				const date = new Date(dateString);
				
				// 获取月份、日期、小时和分钟
				const month = String(date.getMonth() + 1).padStart(2, '0'); // getMonth() 返回的是0-11，所以需要+1
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				
				// 格式化日期字符串
				return `${month}月${day}日 ${hours}:${minutes}`;
			},
			getTop() {
				var that = this
				var data = {
					// id: 1,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_info', data).then(res => {
					// console.log('作业详情-顶部信息', res);
					if (res.code != 0) {
						that.topData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getMarks() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_score', data).then(res => {
					// console.log('作业详情-作业报告-分数统计', res);
					if (res.code != 0) {
						that.markData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getquestionData() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_analysis', data).then(res => {
					// console.log('作业详情-作业报告-题型分析', res);
					if (res.code != 0) {
						const arr = res.data.question_analysis
						const getValue = (keys, source) => {
							return keys.reduce((nextObj, key) => {
								return nextObj && nextObj[key] ? nextObj[key] : null
							}, source)
						}
						that.analyzeType1 = getValue([
							[0],
							['听说模考']
						], arr)
						that.analyzeType2 = getValue([
							[1],
							['单词跟读']
						], arr)
						that.analyzeType3 = getValue([
							[2],
							['课文跟读']
						], arr)
						that.analyzeType4 = getValue([
							[3],
							['线上作答']
						], arr)
						that.analyzeType5 = getValue([
							[4],
							['报听写']
						], arr)
						// console.log('作业详情-作业报告-题型分析arr', arr);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getStudent() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_achievement', data).then(res => {
					// console.log('作业详情-学生成绩', res);
					if (res.code != 0) {
						that.studentData = res.data.achievement
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getTopic() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_detail_census', data).then(res => {
					// console.log('作业详情-题目统计', res);
					if (res.code != 0) {
						that.totalData = res.data.census
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

			// getKeHouList88() {
			// 	var that = this
			// 	var data = {
			// 		id: 8,
			// 		tid: 1045747,
			// 	}
			// 	// 题目详情-题目列表
			// 	// https://d-xueer.bigchun.com/api/new_homework/teacher_homework_detail_question_list
			// 	that.$post('new_homework/teacher_homework_detail_question_list', data).then(res => {
			// 		// console.log('题目详情-题目内容', res);
			// 		if (res.code != 0) {
			// 			// that.totalData = res.data.census
			// 		} else {
			// 			uni.showToast({
			// 				title: res.msg,
			// 				icon: 'none',
			// 				duration: 2000
			// 			});
			// 		}
			// 	})
			// },

			handleSwitchTab(index) {
				var that = this
				that.currentIndex = index;
				console.log('currentIndex', index)
				if (index == 0) {
					that.isShow1 = true
					that.isShow2 = false
					that.isShow3 = false
					that.getBaogao();

				} else if (index == 1) {
					that.isShow2 = true
					that.isShow1 = false
					that.isShow3 = false
					that.getChengji()
				} else {
					that.isShow3 = true
					that.isShow2 = false
					that.isShow1 = false
					that.getTimutongji()
				}
			},
			getBaogao(){
				this.getbaogaoWeiWancheng();
				this.getbaogaoYouxiu();
				this.getbaogaoChengji();
			},
			getChengji(){
			
			},
			getTimutongji(){
			
			},
			getbaogaoWeiWancheng() {
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_incomplete', data).then(res => {
					// console.log('作业详情-题目统计', res);
					if (res.code != 0) {
						that.weiWachengData = res.data.incomplete
						that.weiWachengTotal =  res.data.total
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getbaogaoYouxiu(){
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_excellent_list', data).then(res => {
					// console.log('作业详情-题目统计', res);
					if (res.code != 0) {
						that.learning_star = res.data.learning_star
						that.positive_star = res.data.positive_star
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getbaogaoChengji(){
				var that = this
				var data = {
					// id: 8,
					id: that.tabId
				}
				that.$post('new_homework/teacher_homework_result_summary', data).then(res => {
					console.log('作业详情-题目统计', res);
					if (res.code != 0) {
					this.chengji_info = res.data.info;
					this.chengji_user_list = res.data.user_list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getGrades() {
				uni.navigateTo({
					url: `/pages/grades/index?tid=` + this.tabId + '&tname=' + this.tabarName,
				});
			},
			goTab3Detail(id) {
				uni.navigateTo({
					url: `/pages/answerDetail/index?tid=` + this.tabId + '&tname=' + this.tabarName
				});
			},
			getRevocation(index) {
				this.btnID = index
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			deClose(){
				
				this.$refs.popup2.close()
			},
			getSumbut(index) {
				console.log('indez', index)
				var that = this
				if(index==1){
					var data = {
						// id: 4,
						id: index
					}
					const revokeUrl = 'new_homework/teacher_homework_revoke' //撤销
					const redoUrl = 'new_homework/teacher_homework_redo' //重做
					const newUrl = index == 2 ? redoUrl : revokeUrl
					const text = index == 2 ? '重做' : '撤销'
					that.$post(newUrl, data).then(res => {
						console.log(text, res);
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						if (res.code != 0) {
							that.$refs.popup.close()
						}
					})
				}else{
					this.$refs.popup2.open('center')
					this.$refs.popup.close()
				}
				
			},


		}
	}
</script>


<style lang='less' scoped>
	.workdetailContent {
		margin: 0 32rpx;
	}

	.cardItem1 {
		margin: 32rpx 0;
		background: linear-gradient(180deg, #F2F7FD 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(41, 121, 255, 0.05);
		border-radius: 24rpx;
		border: 2rpx solid rgba(41, 121, 255, 1);
		opacity: 0.95;
		/* border-image: linear-gradient(44deg, rgba(41, 121, 255, 1), rgba(122, 172, 254, 1), rgba(41, 121, 255, 1)) 1 1; */
		padding: 30rpx;
	}

	.cardItem1 .item1_top {
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		text-align: left;
		margin-bottom: 10rpx;
	}

	.cardItem1 .item1_cont {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cardItem1 .item1_cont .item1_left {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.cardItem1 .item1_cont .item1_left .text {
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		text-align: left;
		margin-top: 10rpx;
	}

	.cardItem1 .item1_cont .item1_right {}

	.cardItem1 .item1_cont .item1_right .btns {
		width: 144rpx;
		height: 48rpx;
		background: #2979FF;
		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(41, 121, 255, 0.5);
		border-radius: 24rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}

	.cardItem1 .item1_cont .item1_right .btns:nth-of-type(2) {
		margin: 16rpx 0;
	}

	/* tab */
	.course-grade {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 2rpx solid #eee;
		color: #fff;
		height: 90rpx;
		font-weight: 600;
		font-size: 26rpx;
	}

	.course-grade .grade-text {
		margin: 0 20rpx;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #222222;
		text-align: right;
		display: flex;
		align-items: center;

	}

	.course-grade .picIcons {
		width: 32rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}

	.course-grade .active-tab {
		font-weight: 500;
		position: relative;
	}

	.course-grade .active-tab::after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 9;
		border-bottom: 4rpx solid #2979FF;
		width: 128rpx;
		height: 6rpx;
	}

	/* tab biaoti */

	.tabItem .card_Item {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden;
		/* padding-bottom: 10rpx; */
		margin-top: 30rpx;
	}

	.tabItem .card_Item .head_title {
		display: flex;
		align-items: center;
		margin: 30rpx 32rpx;
	}

	.tabItem .card_Item .head_title image {
		width: 30rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.tabItem .card_Item .head_title .headH1 {
		height: 44rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		line-height: 44rpx;
		text-align: left;
	}

	.tabItem .card_Item .nocompleteItem {}

	.tabItem .card_Item .nocompleteItem .title {
		margin: 24rpx 80rpx 48rpx;
		height: 48rpx;
		background: #F3F4F6;
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 48rpx;
		text-align: center;
		color: #727A8E;
	}

	.tabItem .card_Item .nocompleteItem .title text {
		color: #2979FF;
		margin-right: 10rpx;
	}

	.tabItem .card_Item .nocompleteItem .list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin: 0 32rpx 20rpx;
	}

	.tabItem .card_Item .nocompleteItem .list .name {
		margin-bottom: 24rpx;
		width: 25%;
		height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: center;
	}

	.outstandingItem {}

	.outstandingItem .item_row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 0 40rpx;
	}

	.outstandingItem .item_row:nth-of-type(1) {
		border-bottom: 1px solid #eee;
	}

	.outstandingItem .item_row .titleImg {
		width: 173px;
		height: 32px;
		margin: 48rpx 0 32rpx;
	}

	.outstandingItem .item_row .text {
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
	}

	.outstandingItem .item_row .itemView {
		display: flex;
		justify-content: center;
		align-items: center;
		/* margin: 48rpx 0 20rpx; */
	}

	.outstandingItem .item_row .itemView .imgItem {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.outstandingItem .item_row .itemView .imgItem image {
		width: 73px;
		height: 64px;
		margin: 48rpx 16rpx 10rpx;
	}

	.outstandingItem .item_row .itemView .imgItem .name {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin-bottom: 50rpx;
	}

	.scoreItem {
		margin: 32rpx;
		background: linear-gradient(180deg, #F2F7FD 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(41, 121, 255, 0.05);
		border-radius: 24rpx;
		border: 2rpx solid rgba(41, 121, 255, 1);
		opacity: 0.95;
		/* border-image: linear-gradient(44deg, rgba(41, 121, 255, 1), rgba(122, 172, 254, 1), rgba(41, 121, 255, 1)) 1 1; */
		padding: 30rpx;
	}

	.scoreItem .title {
		font-weight: 500;
		font-size: 32rpx;
		color: #222222;
	}

	.scoreItem .text {
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		margin-top: 24rpx;

	}

	/* tabItem  xuesheng*/
	.tabItem .tabCard {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden;
		padding-bottom: 10rpx;
		margin-top: 30rpx;
	}

	.tabItem .tabCard .title {
		height: 80rpx;
		background: #7AA7FF;
		border-radius: 24rpx;
		display: flex;
		margin: 30rpx;

	}

	.tabItem .tabCard .title .text {
		display: block;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.tabItem .tabCard .title .text:nth-of-type(1) {
		width: 30%;
	}

	.tabItem .tabCard .title .text:nth-of-type(2) {
		width: 50%;
	}

	.tabItem .tabCard .title .text:nth-of-type(3) {
		width: 30%;
	}

	.tabItem .tabCard .title .text:nth-of-type(4) {
		width: 30%;
	}

	.tabItem .tabCard .lists {
		margin: 0 30rpx;
	}

	.tabItem .tabCard .lists .li {
		display: flex;
		align-items: center;
		height: 80rpx;
	}

	.tabItem .tabCard .lists .li .num {
		width: 30%;
		height: 36rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		line-height: 36rpx;
		text-align: left;
		margin-left: 20rpx;
	}

	.tabItem .tabCard .lists .li .num image {
		width: 32rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}

	.tabItem .tabCard .lists .li .name {
		min-height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: center;

	}

	.tabItem .tabCard .lists .li .name1 {
		width: 50%;
	}

	.tabItem .tabCard .lists .li .name2 {
		width: 30%;
	}

	/* .tabItem .tabCard .lists .li .name3{width: 30%; } */






























	/* timu */
	.tabItem .tabCard3 .title .text:nth-of-type(1) {
		width: 65%;
	}

	.tabItem .tabCard3 .title .text:nth-of-type(2) {
		width: 35%;
	}

	.tabItem .tabCard3 .lists .li .name {
		width: 65%;
	}

	.tabItem .tabCard3 .lists .li .num {
		width: 35%;
		text-align: center;
	}

	.tabItem .tabCard3 .lists .li .num image {
		width: 10rpx;
		height: 18rpx;
	}

	/* baogao */
	.tabItem .tabCard1 {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden;
		padding-bottom: 10rpx;
		margin-top: 30rpx;
	}

	.tabItem .tabCard1 .title {
		height: 80rpx;
		background: #7AA7FF;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-around;
		margin: 30rpx 30rpx 0;
	}


	.tabItem .tabCard1 .title .name {
		line-height: 80rpx;
		border-right: 2rpx solid #fff;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: right;
		padding-right: 20rpx;
		padding: 0 20rpx 0 18rpx;
	}

	.tabItem .tabCard1 .title .item_text {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 20%;
	}

	.tabItem .tabCard1 .title .item_text:nth-last-of-type(1) {
		border-left: 2rpx solid #fff;
	}

	.tabItem .tabCard1 .title .item_text .text {
		font-weight: 600;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: right;
	}

	.tabItem .tabCard1 .title .item_text .txt {
		font-weight: 400;
		font-size: 16rpx;
		color: #FFFFFF;
		text-align: right;
		margin-top: 5rpx;
	}

	.tabItem .tabCard1 .lists {
		height: 80rpx;
		background: #F4F5F7;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		margin: 0 30rpx 20rpx 30rpx;
	}

	.tabItem .tabCard1 .lists .li {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 80rpx;
		height: 80rpx;
		text-align: center;
	}

	.tabItem .tabCardfenxi .lists {
		margin: 0 30rpx 0;
	}

	.tabItem .tabCardfenxi .title .name {
		width: 170rpx;
		text-align: center;
	}

	.tabItem .tabCardfenxi .lists .li:nth-of-type(1) {
		width: 140rpx;
	}

	.tabItem .tabCardfenxi .lists .li {
		width: 20%;
	}


	/* 	.tabItem .tabCard1 .head_title .txt {
		height: 44rpx;
		font-weight: 600;
		font-size: 26rpx;
		color: #727A8E;
		line-height: 44rpx;
		text-align: left;
	} */




	/* tankuang */
	.popupRow {
		width: 320px;
		height: 410px;
	}

	.popupRow image {
		width: 320px;
		height: 410px;
		position: relative;
	}

	.popupRow .popup-items {
		position: absolute;
		top: 8%;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.popupRow .popup-items .title {
		font-weight: 500;
		font-size: 44rpx;
		color: #222222;
	}

	.popupRow .popup-items .text {
		font-weight: 400;
		font-size: 28rpx;
		color: #727A8E;
		margin: 12rpx 0 60rpx;
	}

	.popupRow .popup-items .popup-btn {
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.popupRow .popup-items .popup-btn .btn {
		font-weight: 400;
		font-size: 28rpx;
		color: #727A8E;
		width: 240rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: rgba(41, 121, 255, 0.15);
		border-radius: 44rpx;
	}

	.popupRow .popup-items .popup-btn .btnOK {
		margin-left: 40rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #2979FF;
		box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(41, 121, 255, 0.5);
	}

	.popupCopyRow {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.popupCopyRow .bgIcon {
		width: 323px;
		min-height: 278px;
	}

	.popupCopyRow .dexIcon {
		width: 84rpx;
		height: 84rpx;
	}

	.popupCopyRow .copyView {
		width: 247px;
		height: 266px;
		position: absolute;
		top: 10%;
		left: 50%;
		z-index: 99999;
		transform: translate(-50%,0);
		
	}

	.popupCopyRow .copyView .copyItem {
		background: #F7FCFF;
		border-radius: 16rpx;
		padding: 30rpx;
		
	}

	.popupCopyRow .copyView .copyItem .text {
		font-weight: 400;
		font-size: 26rpx;
		color: #727A8E;
		line-height: 18px;
		margin: 12rpx 0;
	}

	.popupCopyRow .popup-btn {
		margin-top: 60rpx;
		
	}

	.popupCopyRow .popup-btn .btn {
		background: #4A90F6;
		box-shadow: 0px 2px 4px 0px rgba(74, 144, 246, 0.5);
		border-radius: 22px;
		width: 153px;
		height: 88rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 0 auto;
		line-height: 88rpx;
		text-align: center;
	}
	.avatar{
		position: absolute;
		top: 10%;
		left: 13%;
		width: 90rpx!important;
		height: 82rpx!important;
		border-radius: 50%;
	}
</style>